<template>
  <div class="user-settings-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>个人设置</h3>
        </div>
      </template>

      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <!-- 个人信息 -->
        <el-tab-pane label="个人信息" name="profile">
          <div class="tab-content">
            <el-form :model="userProfile" :rules="profileRules" ref="profileFormRef" label-width="100px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="头像" prop="avatar">
                    <div class="avatar-upload-wrapper">
                      <el-upload
                        class="avatar-uploader"
                        :auto-upload="false"
                        :show-file-list="false"
                        :on-change="handleFileChange"
                        accept="image/*"
                      >
                        <img v-if="userProfile.avatar" :src="userProfile.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                      </el-upload>
                      <div class="avatar-tip">
                        <el-text size="small" type="info">支持 JPG、PNG 格式，建议尺寸 300x300</el-text>
                      </div>
                    </div>
                  </el-form-item>
                  
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="userProfile.username" placeholder="请输入用户名" />
                  </el-form-item>
                  
                  <el-form-item label="真实姓名" prop="realName">
                    <el-input v-model="userProfile.realName" placeholder="请输入真实姓名" />
                  </el-form-item>
                  
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userProfile.email" placeholder="请输入邮箱" />
                  </el-form-item>
                  
                  <el-form-item label="手机号" prop="phone">
                    <el-input v-model="userProfile.phone" placeholder="请输入手机号" />
                  </el-form-item>
                </el-col>
                
                <el-col :span="12">
                  <el-form-item label="部门" prop="department">
                    <el-select v-model="userProfile.department" placeholder="请选择部门" style="width: 100%">
                      <el-option label="技术部" value="技术部" />
                      <el-option label="销售部" value="销售部" />
                      <el-option label="采购部" value="采购部" />
                      <el-option label="财务部" value="财务部" />
                      <el-option label="人事部" value="人事部" />
                    </el-select>
                  </el-form-item>
                  
                  <el-form-item label="职位" prop="position">
                    <el-input v-model="userProfile.position" placeholder="请输入职位" />
                  </el-form-item>
                  
                  <el-form-item label="入职时间" prop="joinDate">
                    <el-date-picker
                      v-model="userProfile.joinDate"
                      type="date"
                      placeholder="请选择入职时间"
                      style="width: 100%"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                  
                  <el-form-item label="个人简介" prop="bio">
                    <el-input 
                      v-model="userProfile.bio" 
                      type="textarea" 
                      :rows="4"
                      placeholder="请输入个人简介" 
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              
              <el-form-item>
                <el-button type="primary" @click="saveProfile" :loading="saveLoading">
                  保存信息
                </el-button>
                <el-button @click="resetProfile">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 安全设置 -->
        <el-tab-pane label="安全设置" name="security">
          <div class="tab-content">
            <el-form :model="securityForm" :rules="securityRules" ref="securityFormRef" label-width="120px">
              <el-divider content-position="left">修改密码</el-divider>
              
              <el-form-item label="当前密码" prop="currentPassword">
                <el-input
                  v-model="securityForm.currentPassword"
                  type="password"
                  placeholder="请输入当前密码"
                  show-password
                />
              </el-form-item>
              
              <el-form-item label="新密码" prop="newPassword">
                <el-input
                  v-model="securityForm.newPassword"
                  type="password"
                  placeholder="请输入新密码"
                  show-password
                />
              </el-form-item>
              
              <el-form-item label="确认密码" prop="confirmPassword">
                <el-input
                  v-model="securityForm.confirmPassword"
                  type="password"
                  placeholder="请再次输入新密码"
                  show-password
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="changePassword" :loading="changePasswordLoading">
                  修改密码
                </el-button>
              </el-form-item>
            </el-form>
            
            <el-divider content-position="left">登录安全</el-divider>
            
            <el-form :model="loginSecurity" label-width="120px">
              <el-form-item label="两步验证">
                <el-switch v-model="loginSecurity.twoFactorAuth" />
                <span class="form-tip">启用后登录需要手机验证码</span>
              </el-form-item>
              
              <el-form-item label="登录通知">
                <el-switch v-model="loginSecurity.loginNotification" />
                <span class="form-tip">新设备登录时发送通知</span>
              </el-form-item>
              
              <el-form-item label="会话超时">
                <el-select v-model="loginSecurity.sessionTimeout" style="width: 200px">
                  <el-option label="30分钟" value="30" />
                  <el-option label="1小时" value="60" />
                  <el-option label="2小时" value="120" />
                  <el-option label="4小时" value="240" />
                  <el-option label="8小时" value="480" />
                </el-select>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveLoginSecurity" :loading="saveLoading">
                  保存设置
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 界面设置 -->
        <el-tab-pane label="界面设置" name="interface">
          <div class="tab-content">
            <el-form :model="interfaceSettings" label-width="120px">
              <el-divider content-position="left">主题设置</el-divider>
              
              <el-form-item label="主题模式">
                <el-radio-group v-model="interfaceSettings.theme">
                  <el-radio label="light">浅色模式</el-radio>
                  <el-radio label="dark">深色模式</el-radio>
                  <el-radio label="auto">跟随系统</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="主题色">
                <el-color-picker v-model="interfaceSettings.primaryColor" />
              </el-form-item>
              
              <el-divider content-position="left">布局设置</el-divider>
              
              <el-form-item label="侧边栏">
                <el-radio-group v-model="interfaceSettings.sidebarMode">
                  <el-radio label="vertical">垂直</el-radio>
                  <el-radio label="horizontal">水平</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="侧边栏宽度">
                <el-slider
                  v-model="interfaceSettings.sidebarWidth"
                  :min="200"
                  :max="300"
                  :step="10"
                  show-input
                  style="width: 300px"
                />
              </el-form-item>
              
              <el-form-item label="固定头部">
                <el-switch v-model="interfaceSettings.fixedHeader" />
              </el-form-item>
              
              <el-form-item label="固定侧边栏">
                <el-switch v-model="interfaceSettings.fixedSidebar" />
              </el-form-item>
              
              <el-divider content-position="left">显示设置</el-divider>
              
              <el-form-item label="页面动画">
                <el-switch v-model="interfaceSettings.pageAnimation" />
              </el-form-item>
              
              <el-form-item label="面包屑导航">
                <el-switch v-model="interfaceSettings.breadcrumb" />
              </el-form-item>
              
              <el-form-item label="标签页">
                <el-switch v-model="interfaceSettings.tabs" />
              </el-form-item>
              
              <el-form-item label="页面大小">
                <el-select v-model="interfaceSettings.pageSize" style="width: 200px">
                  <el-option label="紧凑" value="compact" />
                  <el-option label="默认" value="default" />
                  <el-option label="宽松" value="comfortable" />
                </el-select>
              </el-form-item>
              
              <el-divider content-position="left">登录样式配置</el-divider>
              
              <el-form-item label="登录样式">
                <el-select 
                  v-model="interfaceSettings.loginStyle" 
                  placeholder="请选择登录样式" 
                  style="width: 100%"
                >
                  <el-option
                    v-for="style in availableLoginStyles"
                    :key="style.name"
                    :label="style.label"
                    :value="style.name"
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center;">
                      <span>{{ style.label }}</span>
                      <el-tag v-if="style.name === interfaceSettings.loginStyle" type="success" size="small">
                        当前
                      </el-tag>
                    </div>
                  </el-option>
                </el-select>
                <span class="form-tip">选择您喜欢的登录页面样式</span>
              </el-form-item>
              
              <el-form-item label="登录样式预览">
                <div class="login-style-preview">
                  <div
                    v-for="style in availableLoginStyles"
                    :key="style.name"
                    class="login-style-card"
                    :class="{ active: interfaceSettings.loginStyle === style.name }"
                    @click="selectLoginStyle(style.name)"
                  >
                    <div class="style-header">
                      <div class="style-name">{{ style.label }}</div>
                      <el-tag v-if="style.name === interfaceSettings.loginStyle" type="success" size="small">
                        当前
                      </el-tag>
                    </div>
                    <div class="style-description">{{ style.description }}</div>
                  </div>
                </div>
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveInterfaceSettings" :loading="saveLoading">
                  保存设置
                </el-button>
                <el-button @click="resetInterfaceSettings">重置</el-button>
                <el-button type="success" @click="previewSettings">预览效果</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 快捷操作 -->
        <el-tab-pane label="快捷操作" name="shortcuts">
          <div class="tab-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-card class="shortcut-card">
                  <template #header>
                    <span>常用功能</span>
                  </template>
                  <div class="shortcut-content">
                    <div class="shortcut-item" v-for="item in commonShortcuts" :key="item.id">
                      <el-button 
                        :type="item.type" 
                        :icon="item.icon" 
                        @click="executeShortcut(item)"
                        class="shortcut-button"
                      >
                        {{ item.name }}
                      </el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
              
              <el-col :span="12">
                <el-card class="shortcut-card">
                  <template #header>
                    <span>自定义快捷方式</span>
                  </template>
                  <div class="shortcut-content">
                    <el-form :model="customShortcut" label-width="80px">
                      <el-form-item label="名称">
                        <el-input v-model="customShortcut.name" placeholder="请输入快捷方式名称" />
                      </el-form-item>
                      <el-form-item label="URL">
                        <el-input v-model="customShortcut.url" placeholder="请输入跳转地址" />
                      </el-form-item>
                      <el-form-item label="图标">
                        <el-select v-model="customShortcut.icon" placeholder="请选择图标" style="width: 100%">
                          <el-option label="首页" value="House" />
                          <el-option label="用户" value="User" />
                          <el-option label="设置" value="Setting" />
                          <el-option label="文档" value="Document" />
                          <el-option label="图表" value="TrendCharts" />
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="addCustomShortcut" :loading="saveLoading">
                          添加
                        </el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            
            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="24">
                <el-card class="shortcut-card">
                  <template #header>
                    <span>我的快捷方式</span>
                  </template>
                  <div class="shortcut-list">
                    <div class="shortcut-item" v-for="item in myShortcuts" :key="item.id">
                      <el-button 
                        :type="item.type" 
                        :icon="item.icon" 
                        @click="executeShortcut(item)"
                        class="shortcut-button"
                      >
                        {{ item.name }}
                      </el-button>
                      <el-button 
                        type="danger" 
                        size="small" 
                        @click="removeShortcut(item)"
                        class="remove-button"
                      >
                        删除
                      </el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <!-- 通知设置 -->
        <el-tab-pane label="通知设置" name="notifications">
          <div class="tab-content">
            <el-form :model="notificationSettings" label-width="150px">
              <el-divider content-position="left">系统通知</el-divider>
              
              <el-form-item label="邮件通知">
                <el-switch v-model="notificationSettings.emailNotification" />
              </el-form-item>
              
              <el-form-item label="短信通知">
                <el-switch v-model="notificationSettings.smsNotification" />
              </el-form-item>
              
              <el-form-item label="浏览器通知">
                <el-switch v-model="notificationSettings.browserNotification" />
              </el-form-item>
              
              <el-divider content-position="left">通知类型</el-divider>
              
              <el-form-item label="订单状态变更">
                <el-switch v-model="notificationSettings.orderStatusChange" />
              </el-form-item>
              
              <el-form-item label="库存预警">
                <el-switch v-model="notificationSettings.stockWarning" />
              </el-form-item>
              
              <el-form-item label="审批提醒">
                <el-switch v-model="notificationSettings.approvalReminder" />
              </el-form-item>
              
              <el-form-item label="系统维护">
                <el-switch v-model="notificationSettings.systemMaintenance" />
              </el-form-item>
              
              <el-form-item label="安全提醒">
                <el-switch v-model="notificationSettings.securityAlert" />
              </el-form-item>
              
              <el-divider content-position="left">通知时间</el-divider>
              
              <el-form-item label="免打扰时间">
                <el-time-picker
                  v-model="notificationSettings.quietStartTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="开始时间"
                  style="width: 150px"
                />
                <span style="margin: 0 10px;">至</span>
                <el-time-picker
                  v-model="notificationSettings.quietEndTime"
                  format="HH:mm"
                  value-format="HH:mm"
                  placeholder="结束时间"
                  style="width: 150px"
                />
              </el-form-item>
              
              <el-form-item>
                <el-button type="primary" @click="saveNotificationSettings" :loading="saveLoading">
                  保存设置
                </el-button>
                <el-button @click="testNotification">测试通知</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 图片裁剪对话框 -->
    <ImageCropper
      v-model="showCropper"
      :image-file="selectedFile"
      @cropped="handleCropped"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import ImageCropper from '@/components/common/ImageCropper.vue'
import { getAvailableLoginComponents } from '@/components/auth/login/index.js'

// 响应式数据
const activeTab = ref('profile')
const saveLoading = ref(false)
const changePasswordLoading = ref(false)
const profileFormRef = ref()
const securityFormRef = ref()
const showCropper = ref(false)
const selectedFile = ref(null)

// 用户信息
const userProfile = reactive({
  avatar: '',
  username: 'admin',
  realName: '管理员',
  email: 'admin@example.com',
  phone: '13800138000',
  department: '技术部',
  position: '系统管理员',
  joinDate: '2024-01-01',
  bio: '负责系统管理和维护工作'
})

// 安全设置
const securityForm = reactive({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const loginSecurity = reactive({
  twoFactorAuth: false,
  loginNotification: true,
  sessionTimeout: '120'
})

// 界面设置
const interfaceSettings = reactive({
  theme: 'light',
  primaryColor: '#409EFF',
  sidebarMode: 'vertical',
  sidebarWidth: 240,
  fixedHeader: true,
  fixedSidebar: true,
  pageAnimation: true,
  breadcrumb: true,
  tabs: true,
  pageSize: 'default',
  loginStyle: 'glass' // 登录样式
})

// 可用的登录样式
const availableLoginStyles = ref(getAvailableLoginComponents())

// 快捷操作
const commonShortcuts = ref([
  { id: 1, name: '新建订单', type: 'primary', icon: 'Plus', action: 'createOrder' },
  { id: 2, name: '库存查询', type: 'success', icon: 'Search', action: 'stockQuery' },
  { id: 3, name: '财务报表', type: 'warning', icon: 'TrendCharts', action: 'financialReport' },
  { id: 4, name: '系统设置', type: 'info', icon: 'Setting', action: 'systemSettings' }
])

const customShortcut = reactive({
  name: '',
  url: '',
  icon: 'House'
})

const myShortcuts = ref([
  { id: 1, name: '我的工作台', type: 'primary', icon: 'House', url: '/dashboard' },
  { id: 2, name: '待办事项', type: 'warning', icon: 'Bell', url: '/todo' }
])

// 通知设置
const notificationSettings = reactive({
  emailNotification: true,
  smsNotification: false,
  browserNotification: true,
  orderStatusChange: true,
  stockWarning: true,
  approvalReminder: true,
  systemMaintenance: true,
  securityAlert: true,
  quietStartTime: '22:00',
  quietEndTime: '08:00'
})

// 表单验证规则
const profileRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ]
}

const securityRules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== securityForm.newPassword) {
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 方法
const handleTabChange = (tabName) => {
  activeTab.value = tabName
}

const handleFileChange = (file) => {
  // 验证文件类型
  const isImage = file.raw.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return
  }

  // 验证文件大小
  const isLt5M = file.raw.size / 1024 / 1024 < 5
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!')
    return
  }

  // 保存文件并打开裁剪对话框
  selectedFile.value = file.raw
  showCropper.value = true
}

const handleCropped = ({ file, url }) => {
  // 裁剪完成后，显示裁剪后的图片
  userProfile.avatar = url
  
  // 这里可以将裁剪后的文件上传到服务器
  // uploadAvatar(file)
  
  ElMessage.success('头像设置成功，记得点击保存按钮保存信息')
}

const uploadAvatar = async (file) => {
  // 上传到服务器的逻辑
  const formData = new FormData()
  formData.append('avatar', file)
  
  try {
    // const response = await fetch('/api/upload/avatar', {
    //   method: 'POST',
    //   body: formData
    // })
    // const data = await response.json()
    // userProfile.avatar = data.url
    
    ElMessage.success('头像上传成功')
  } catch (error) {
    console.error('上传失败:', error)
    ElMessage.error('头像上传失败，请重试')
  }
}

const saveProfile = async () => {
  if (!profileFormRef.value) return
  
  try {
    await profileFormRef.value.validate()
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('userProfile', JSON.stringify(userProfile))
    
    ElMessage.success('个人信息保存成功')
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const resetProfile = () => {
  Object.assign(userProfile, {
    avatar: '',
    username: 'admin',
    realName: '管理员',
    email: 'admin@example.com',
    phone: '13800138000',
    department: '技术部',
    position: '系统管理员',
    joinDate: '2024-01-01',
    bio: '负责系统管理和维护工作'
  })
  profileFormRef.value?.clearValidate()
}

const changePassword = async () => {
  if (!securityFormRef.value) return
  
  try {
    await securityFormRef.value.validate()
    changePasswordLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('密码修改成功')
    
    // 清空表单
    Object.assign(securityForm, {
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    securityFormRef.value?.clearValidate()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    changePasswordLoading.value = false
  }
}

const saveLoginSecurity = async () => {
  try {
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('loginSecurity', JSON.stringify(loginSecurity))
    
    ElMessage.success('登录安全设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const saveInterfaceSettings = async () => {
  try {
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('interfaceSettings', JSON.stringify(interfaceSettings))
    
    ElMessage.success('界面设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const resetInterfaceSettings = () => {
  Object.assign(interfaceSettings, {
    theme: 'light',
    primaryColor: '#409EFF',
    sidebarMode: 'vertical',
    sidebarWidth: 240,
    fixedHeader: true,
    fixedSidebar: true,
    pageAnimation: true,
    breadcrumb: true,
    tabs: true,
    pageSize: 'default',
    loginStyle: 'glass' // 登录样式
  })
}

const selectLoginStyle = (styleName) => {
  interfaceSettings.loginStyle = styleName
}

const previewLoginStyle = () => {
  // 打开新窗口预览登录页面
  const previewWindow = window.open(
    `/login?preview=true&style=${interfaceSettings.loginStyle}`,
    '_blank',
    'width=1200,height=800,scrollbars=yes,resizable=yes'
  )
  
  if (!previewWindow) {
    ElMessage.warning('无法打开预览窗口，请检查浏览器弹窗设置')
  } else {
    ElMessage.success('已打开登录页面预览窗口')
  }
}

const previewSettings = () => {
  // 预览登录样式
  previewLoginStyle()
}

const executeShortcut = (item) => {
  if (item.url) {
    // 跳转到指定页面
    ElMessage.info(`跳转到: ${item.name}`)
  } else {
    // 执行特定操作
    ElMessage.info(`执行操作: ${item.name}`)
  }
}

const addCustomShortcut = async () => {
  if (!customShortcut.name || !customShortcut.url) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  try {
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    const newShortcut = {
      id: Date.now(),
      name: customShortcut.name,
      type: 'primary',
      icon: customShortcut.icon,
      url: customShortcut.url
    }
    
    myShortcuts.value.push(newShortcut)
    
    // 清空表单
    Object.assign(customShortcut, {
      name: '',
      url: '',
      icon: 'House'
    })
    
    ElMessage.success('快捷方式添加成功')
  } catch (error) {
    console.error('添加失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const removeShortcut = async (item) => {
  try {
    await ElMessageBox.confirm(`确定要删除快捷方式 "${item.name}" 吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const index = myShortcuts.value.findIndex(shortcut => shortcut.id === item.id)
    if (index > -1) {
      myShortcuts.value.splice(index, 1)
      ElMessage.success('快捷方式删除成功')
    }
  } catch {
    // 用户取消操作
  }
}

const saveNotificationSettings = async () => {
  try {
    saveLoading.value = true
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    localStorage.setItem('notificationSettings', JSON.stringify(notificationSettings))
    
    ElMessage.success('通知设置保存成功')
  } catch (error) {
    console.error('保存失败:', error)
  } finally {
    saveLoading.value = false
  }
}

const testNotification = () => {
  ElMessage.success('测试通知发送成功')
}

// 生命周期
onMounted(() => {
  // 从本地存储加载设置
  const savedProfile = localStorage.getItem('userProfile')
  if (savedProfile) {
    Object.assign(userProfile, JSON.parse(savedProfile))
  }
  
  const savedLoginSecurity = localStorage.getItem('loginSecurity')
  if (savedLoginSecurity) {
    Object.assign(loginSecurity, JSON.parse(savedLoginSecurity))
  }
  
  const savedInterfaceSettings = localStorage.getItem('interfaceSettings')
  if (savedInterfaceSettings) {
    Object.assign(interfaceSettings, JSON.parse(savedInterfaceSettings))
  }
  
  const savedNotificationSettings = localStorage.getItem('notificationSettings')
  if (savedNotificationSettings) {
    Object.assign(notificationSettings, JSON.parse(savedNotificationSettings))
  }
})
</script>

<style scoped>
.user-settings-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.tab-content {
  padding: 20px 0;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-left: 8px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.avatar-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.avatar-tip {
  margin-left: 10px;
}

.shortcut-card {
  margin-bottom: 20px;
}

.shortcut-content {
  padding: 20px 0;
}

.shortcut-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.shortcut-button {
  flex: 1;
  margin-right: 10px;
}

.remove-button {
  flex-shrink: 0;
}

.shortcut-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px 0;
}

.shortcut-list .shortcut-item {
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 0;
}

.shortcut-list .shortcut-button {
  margin-right: 0;
  margin-bottom: 10px;
}

.shortcut-list .remove-button {
  align-self: center;
}

/* 登录样式预览 */
.login-style-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}

.login-style-card {
  flex: 1;
  min-width: 280px;
  max-width: 400px;
  padding: 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fff;
}

.login-style-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
  transform: translateY(-2px);
}

.login-style-card.active {
  border-color: #409eff;
  background: #ecf5ff;
}

.style-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.style-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.style-description {
  font-size: 13px;
  color: #909399;
  line-height: 1.5;
}
</style>
